<!-- js脚本 -->
 <!-- 菜单 -->
<script  setup lang="ts">
import http from '@/http'
import { onMounted, ref, watch } from 'vue'
import { ElNotification } from 'element-plus'//导入消息提示框
import { ElMessage } from 'element-plus'
import { el, fa, id } from 'element-plus/es/locale'
//定义一个存储所有菜单信息的数组
let Menus2=ref([])
//当前页
let pageNum=ref(1)
//搜索框双向绑定
let uname=ref()
//总页数
let pagePages=ref();
//总条数
let total=ref()
//每页条数
let pageSize=ref(4);
 //修改成功提示框
const open1 = () => {
  ElNotification({
    title: 'Success',
    message: '修改成功',
    type: 'success',
  })
}
// 查询按钮
function sleectLike(){
  //调用查询所有的角色信息方法
  PageAllmenus();
}
//挂载完之后将所有角色信息渲染到表格中
onMounted(()=>{
  PageAllmenus();
})
//定义一个搜索框的双向绑定属性
let MenuName=ref()
//封装查询所有菜单的方法
function PageAllmenus(){
  //发送get请求
  http.get("/menu/PageAllmenus",{params:{MenuName:MenuName.value,pageNum:pageNum.value,pageSize:pageSize.value}}).then((res)=>{
    Menus2.value=res.list
    total.value=res.total
    pagePages.value=res.pages
    console.log("成功")
    console.log("aaa",Menus2.value)
  }).catch(()=>{
    console.log("失败")
  })
}
// 分页：当前页页号发生改变
const handleCurrentChange = (val: number) => {
  // 检查 val 是否为正整数
  if (Number.isInteger(val) && val > 0) {
    console.log("进入if判断")
    // 修改当前页的页号
    pageNum.value = val;
    // 重新获取当前页的数据
    PageAllmenus();
    console.log(`current page: ${val}`);
  } else {
    console.error('Invalid page number:', val);
  }
}
// 添加子菜单的抽屉
import { ElMessageBox } from 'element-plus'

const drawer = ref(false)
const innerDrawer = ref(false)

const handleClose = (done: () => void) => {
  ElMessageBox.confirm('You still have unsaved data, proceed?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
//定义一个双向绑定的菜单对象
let menu=ref({
  /**
     * 菜单ID
     */
      menuId:'',
    /**
     * 父菜单ID
     */
      parentId:'',
    /**
     * 父节点ID集合
     */
      parentIds:'',
    /**
     * 菜单名称
     */
      menuName:'',
    /**
     * 菜单类型（M目录 C菜单 F按钮）
     */
      menuType:'',
    /**
     * 权限标识
     */
      percode:'',
    /**
     * 路由地址
     */
      path:'',
    /**
     * 备注
     */
      remark:'',
    /**
     * 菜单状态（0正常 1停用）
     */
      status:0,
    /**
     * 创建时间
     */
      createTime:'',
    /**
     * 更新时间
     */
      updateTime:'',
    /**
     * 创建者
     */
      createBy:'',
    /**
     * 更新者
     */
      updateBy:'',
})
//定义一个存储所有菜单的数组
let menus=ref([])
//下拉框值
const value = ref('')
//添加子菜单
function addchildMenuList(){
  //修改flag属性
  flag.value=true;
  //清空菜单对象
    menu.value.menuId=''
    menu.value.parentId='',
    menu.value.parentIds='',
    menu.value.menuName='',
    menu.value.menuType='M',
    menu.value.percode='',
    menu.value.path='',
    menu.value. remark='',
    menu.value. status=0,
    menu.value. createTime='',
    menu.value.updateTime='',
    menu.value.createBy='',
    menu.value. updateBy='',
//打开抽屉
drawer.value = true;
//发送get请求
http.get("/menu/selectParentMenus")
.then((res)=>{
  menus.value=res
  console.log("成功",res)
}).catch(()=>{
  console.log("失败")
})
}
//添加确定按钮
function addchildMenuList2(){
  menu.value.parentId=value.value;
  //判断是否选择父菜单
  if(value.value==""){
   menu.value.parentId=null;
  }else{
  }
  console.log(menu.value)
//发送get请求
http.post("/menu/addChildMenuList",menu.value)
.then((res)=>{
  
}).finally(()=>{
    //清空菜单对象
    menu.value.menuId=''
    menu.value.parentId=''
    menu.value.parentIds=''
    menu.value.menuName=''
    menu.value.menuType=''
    menu.value.percode=''
    menu.value.path=''
    menu.value. remark=''
    menu.value. status=0
    menu.value. createTime=''
    menu.value.updateTime=''
    menu.value.createBy=''
    menu.value. updateBy=''
})
}

// 定义一个属性控制修改与添加
let flag=ref(false);
//修改按钮
function updateMenu(index,menu2){
  flag.value=false
  //发送get请求
http.get("/menu/selectParentMenus")
.then((res)=>{
  menus.value=res
  console.log("成功",res)
}).catch(()=>{
  console.log("失败")
})
  //打开抽屉
drawer.value = true;
//将值赋给双向绑定的菜单对象
menu.value.menuId=menu2.menuId
value.value=menu2.parentId
menu.value.menuName=menu2.menuName
menu.value.remark=menu2.remark
menu.value.path=menu2.path
menu.value.menuType=menu2.menuType
menu.value.status=menu2.status
console.log(menu)
}
//修改确定按钮
function updateMenu2(){
  menu.value.parentId=value.value
//发送post请求
http.post("/menu/updateMenu",menu.value)
.then(()=>{
  console.log("成功")
}).catch(()=>{
  console.log("失败")
}).finally(()=>{
  //关闭抽屉
  drawer.value = false;
  //弹出修改成功提示框
open1();
//调用查询所有菜单的方法
PageAllmenus();
})
}
</script>


<template>
   <!-- 按钮 -->
   <div  style="">
       <el-row>
   <el-col :span="8">
       <el-button type="success" class="inputMarging" @click="addchildMenuList"><el-icon><CirclePlus /></el-icon>添加菜单</el-button>
     <div class="grid-content ep-bg-purple" />
   </el-col>
   <el-col :span="8">
      
     <div class="grid-content ep-bg-purple-light" />
   </el-col>
   <el-col :span="8">
       <el-input
   v-model="MenuName"
   style="width: 240px"
   placeholder="请输入要查询的菜单"
   clearable
 />
       <el-button type="primary" class="inputMarging" @click="sleectLike">查询</el-button>
     <div class="grid-content ep-bg-purple" />
   </el-col>
 </el-row>
  </div>
  <!-- 表格 -->

  <div>
    <el-table
      :data="Menus2"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      lazy
      :tree-props="{children:'childMenuList',default:false }"
    >
      <el-table-column prop="menuId" label="编号" sortable />
      <el-table-column prop="menuName" label="名称" sortable />
      <el-table-column prop="remark" label="详细" sortable />
      <el-table-column prop="path" label="路径" sortable />
      <!-- 自定义列 -->
      <el-table-column label="状态" prop="status" sortable>
            <template #default="scope">{{ scope.row.status==0 ? "正常":"停用" }}</template>
        </el-table-column>
      <el-table-column label="菜单类型" prop="menuType" sortable>
            <template #default="scope">{{ scope.row.menuType=='M' ? "目录":"子菜单" }}</template>
        </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="160">
      <template #default="scope">
        <el-button link type="primary" size="small"> <el-button type="success"
           @click="updateMenu(scope.$index, scope.row)" >修改</el-button></el-button>
      </template>
    </el-table-column>
    </el-table>
  </div>

 <!-- 分页 -->
 <div class="example-pagination-block" style="margin-top: 20px;" >
   <el-row type="flex" justify="center"><el-col :span="12" :offset="6">
       <el-pagination v-model:current-page="pageNum"  background :page-size="pageSize"
         layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange"  />
     </el-col></el-row>
   
 </div>
 <!-- 添加子菜单抽屉 -->
 <el-drawer v-model="drawer" title="添加子菜单" :with-header="false">
    <span>{{ flag?'添加子菜单':'修改菜单' }}</span>
    <div style="margin:10px;">
      <br>

      <!-- 下拉菜单 -->
    父菜单 :   <el-select      
      v-model="value"
      placeholder="无"
      clearable
      size="large"
      style="width: 240px"
    >
      <el-option
        v-for="item in menus"
        :key="item.menuId"
        :label="item.menuName"
        :value="item.menuId"
      />
    </el-select>
    <el-input v-model="menu.menuId" type="text" autocomplete="off" v-if="false"/>
       <br>
       <el-form-item label="名称" prop="pass" class="margintop">
      <el-input v-model="menu.menuName" type="text" autocomplete="off" />
    </el-form-item>
    <el-form-item label="详细" prop="pass" >
      <el-input v-model="menu.remark" type="text" autocomplete="off" />
    </el-form-item>
    <el-form-item label="路径" prop="pass" >
      <el-input v-model="menu.path" type="text" autocomplete="off" />
    </el-form-item>
    类别:
    <el-radio-group v-model="menu.menuType"> 
      <el-radio    :value="'M'" size="large">目录</el-radio>
      <el-radio  :value="'C'" size="large">子菜单</el-radio>
    </el-radio-group> 
    <div class="my-4 ml-4">
      状态:
    <el-radio-group v-model="menu.status">
      <el-radio :value="0" size="large">可用</el-radio>
      <el-radio :value="1" size="large">禁用</el-radio>
    </el-radio-group>
    </div> 
    <br>
    <!-- 按钮 -->
     <div class="margintop">
       <el-button type="success" @click="addchildMenuList2" v-if="flag">添加</el-button>
       <el-button type="success"  v-if="!flag" @click="updateMenu2()">修改</el-button>
    <el-button>取消</el-button>
     </div>
   
    </div>
   
  </el-drawer>
</template>
<!-- 样式 -->
 <style scoped>
 /* 自定义树形控件 */
 .custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 24px;
  padding-right: 8px;
}
.margintop{
  margin-top: 10px;
}
</style>